<!-- 我的页面 -->
<template>
  <div>
    <div id="selfCenter">个人中心</div>
    <div id="head">
      <div>
        <p><i class="el-icon-user-solid"></i>:{{ userName }}</p>
        <p><i class="el-icon-location-outline"></i>:{{ address }}</p>
      </div>
      <div id="imgs">
        <img
          src="https://img2.baidu.com/it/u=420600660,1814976147&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=504"
          alt=""
        />
      </div>
    </div>

    <div id="info">
      <div>
        <p style="color: red">844/次</p>
        <p>成交次数</p>
      </div>
      <div>
        <p style="color: red">￥：546541</p>
        <p>消费金额</p>
      </div>
      <div>
        <p style="color: red">￥：78651</p>
        <p>剩余余额</p>
      </div>
    </div>

    <div id="diss">
      <div id="infoDiv" v-for="(item,index) in infoList" :key="item.id">
        <div><img :src="item.img" alt="" /></div>
        <div>
          <p>商户：{{ item.title }}</p>
          <p>类型：{{ item.houseType }}</p>
          <p>
            价格：<span
              style="color: red; font-size: 15px; text-decoration: line-through"
              >{{ item.price }}</span
            ><span style="font-size: 19px">{{ item.price - 500 }}</span>
          </p>
        </div>

        <div >
          <el-button
            type="danger"
            style="
              width: 80px;
              height: 40px;
              font-size: 15px;
              letter-spacing: 1px;
              margin-right: 10px;"
              @click="choose(index)"
            ><span class="pj">评价</span></el-button
          >
        </div>

        <div id="pinlun" v-show="zhi ==item.id">
          <div style="width: 100vw">
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="textarea"
              maxlength="120"
              show-word-limit
            >
            </el-input>
          </div>

          <div style="width: 100vw; display: flex; flex-wrap: wrap">
            环境：<el-rate
              v-model="value"
              show-text
              style="width: 90vw"
            ></el-rate>
            价格：<el-rate
              v-model="value2"
              show-text
              style="width: 90vw"
            ></el-rate>
            服务：<el-rate
              v-model="value3"
              show-text
              style="width: 90vw"
            ></el-rate>
          </div>

          <div style="width: 100vw" id="submit">
            <el-button type="danger" plain style="width: 150px" @click="submit(index)">提交</el-button>
            <el-button type="info" plain style="width: 150px" @click="cancel">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";
export default {
  data() {
    return {
      textarea: "",
      infoList: [],
      value: null,
      value2:null,
      value3: null,
      zhi:0//与传入数据ID判断的值
    };
  },
  async created() {
    let re = await axios.get("http://localhost:3000/mineInfo");
    this.infoList = re.data;
    console.log(this.infoList);
  },
  computed: {
    ...mapState(["userName", "pass", "address"]), //需要配合计算属性使用
   
  },
  methods: {
    choose(e){
      this.zhi=e+2000//鼠标事件点击后讲zhi赋值为所点击的ID
    },
    submit(index){ 
        if(!this.value||!this.value2||!this.value3||!this.textarea){
          this.$notify({
          title: '警告',
          message: '评价信息不完全，在写写！！',
          type: 'warning',
          duration:1000
        });
        return false
        }
        document.getElementsByClassName("pj")[index].innerText="已评价"
        document.getElementsByClassName("pj")[index].parentElement.parentElement.style.backgroundColor="gray"
        document.getElementsByClassName("pj")[index].parentElement.parentElement.disabled=true
        this.zhi=0;
        this.textarea=''
        this.value= null,
        this.value2= null,
        this.value3= null
    },
    cancel(){
      this.zhi=0;
      this.textarea=""
      this.value= null,
      this.value2= null,
      this.value3= null
    }
  },
};
</script>

<style lang="less" scoped>
#submit {
  display: flex;
  justify-content: center;
}
#selfCenter {
  background-color: #3b3b39;
  color: white;
  height: 40px;
  line-height: 40px;
}
#head {
  text-align: left;
  color: white;
  background-color: #e54f4f;
  height: 100px;
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  letter-spacing: 1px;
  font-weight: bold;
  align-items: center;
  padding: 0 10px;
  #imgs {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
#info {
  margin-top: 10px;
  border: 2px solid rgb(225, 223, 220);
  display: flex;
  justify-content: space-around;
  border-radius: 2%;
}
#infoDiv {
  flex-wrap: wrap;
  display: flex;
  font-size: 15px;
  align-items: center;
  text-align: left;
  justify-content: space-between;
  border: 1px solid rgb(230, 225, 225);
  margin: 5px 0;
  p {
    margin: 0 2px;
    width: 140px;
  }
  img {
    width: 120px;
    height: 100px;
  }
}
</style>
<style>
.el-textarea__inner {
  min-height: 120px !important;
  width: 95vw !important;
}
</style>